<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <!-- App Favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">

        <!-- App title -->
        <title>Uplon - Responsive Admin Dashboard Template</title>

        <!-- Switchery css -->
        <link href="assets/plugins/switchery/switchery.min.css" rel="stylesheet" />

        <!-- Bootstrap CSS -->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

        <!-- App CSS -->
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

        <!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
        <!-- Modernizr js -->
        <script src="assets/js/modernizr.min.js"></script>

    </head>


    <body class="fixed-left" id="do-nicescrol">
        <div class="row">
            <div class="col-12">
                <div class="card-box">
                    <div class="row">
                        <div class="col-12">
                            <h4 class="m-t-0 header-title">标题</h4>
                            <p class="text-muted m-b-30 font-13">
                                所有HTML标题, <code class="highlighter-rouge">&lt;h1&gt;</code> through
                                <code>&lt;h6&gt;</code>, are available. <code>.h1</code> through <code>.h6</code>
                                classes are also available, 如果要匹配标题的字体样式，但仍希望内联显示文本.
                            </p>

                            <h1>标题 1</h1>
                            <p class="text-muted">Suspendisse vel quam malesuada, aliquet sem sit
                                amet, fringilla elit. Morbi
                                tempor tincidunt tempor. Etiam id turpis viverra, vulputate sapien
                                nec,
                                varius sem. Curabitur ullamcorper fringilla eleifend. In ut eros
                                hendrerit
                                est consequat posuere et at velit.</p>

                            <div class="clearfix"></div>

                            <h2>标题 2</h2>
                            <p class="text-muted">In nec rhoncus eros. Vestibulum eu mattis nisl.
                                Quisque viverra viverra magna
                                nec pulvinar. Maecenas pellentesque porta augue, consectetur
                                facilisis diam
                                porttitor sed. Suspendisse tempor est sodales augue rutrum
                                tincidunt.
                                Quisque a malesuada purus.</p>

                            <div class="clearfix"></div>

                            <h3>标题 3</h3>
                            <p class="text-muted">Vestibulum auctor tincidunt semper. Phasellus ut
                                vulputate lacus. Suspendisse
                                ultricies mi eros, sit amet tempor nulla varius sed. Proin nisl
                                nisi,
                                feugiat quis bibendum vitae, dapibus in tellus.</p>

                            <div class="clearfix"></div>

                            <h4>标题 4</h4>
                            <p class="text-muted">Nulla et mattis nunc. Curabitur scelerisque
                                commodo condimentum. Mauris
                                blandit, velit a consectetur egestas, diam arcu fermentum justo,
                                eget
                                ultrices arcu eros vel erat.</p>

                            <div class="clearfix"></div>

                            <h5>标题 5</h5>
                            <p class="text-muted">Quisque nec turpis at urna dictum luctus.
                                Suspendisse convallis dignissim
                                eros at volutpat. In egestas mattis dui. Aliquam mattis dictum
                                aliquet.
                                Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio.
                                Vivamus
                                pretium nec odio cursus elementum. Suspendisse molestie ullamcorper
                                ornare.</p>

                            <div class="clearfix"></div>

                            <h6>标题 6</h6>
                            <p class="text-muted">Donec ultricies, lacus id tempor condimentum, orci
                                leo faucibus sem, a
                                molestie libero lectus ac justo. ultricies mi eros, sit amet tempor
                                nulla
                                varius sed. Proin nisl nisi, feugiat quis bibendum vitae, dapibus in
                                tellus.</p>
                        </div>

                    </div>


                    <div class="row m-t-50">
                        <div class="col-12">
                            <h4 class="m-t-0 header-title">显示标题</h4>
                            <p class="text-muted m-b-15 font-13">
                                传统的标题元素被设计成最适合页面内容的内容, 考虑使用 <strong>display heading</strong>—a
                                larger, 稍微更固执己见的标题风.
                            </p>

                            <h1 class="display-1">Display 1</h1>
                            <h1 class="display-2">Display 2</h1>
                            <h1 class="display-3">Display 3</h1>
                            <h1 class="display-4">Display 4</h1>
                        </div>

                    </div>


                    <div class="row m-t-50">
                        <div class="col-sm-6 m-t-20">
                            <h4 class="m-t-0 header-title">内联文本元素</h4>
                            <p class="text-muted m-b-30 font-13">
                                你的文本信息在这.
                            </p>

                            <p class="lead m-t-0">
                                你的标题在这里
                            </p>

                            可以使用标记
                            <mark>
                                highlight</mark> 文本.

                            <br><br>

                            <del>这一行文本将被视为删除文本.</del>

                            <br><br>

                            <ins>这一行文本将被视为文档的一个附加项.</ins>

                            <br><br>

                            <strong>rendered as bold text</strong>

                            <br><br>

                            <em>rendered as italicized text</em>
                        </div>

                        <div class="col-sm-6 m-t-20">
                            <h4 class="m-t-0 header-title">文本颜色</h4>
                            <p class="text-muted m-b-30 font-13">
                                你的文本信息在这.
                            </p>

                            <p class="text-custom">
                                Etiam porta sem malesuada magna mollis euismod.
                            </p>
                            <p class="text-pink">
                                Donec ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p class="text-muted">
                                Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
                            </p>
                            <p class="text-primary">
                                Nullam id dolor id nibh ultricies vehicula ut id elit.
                            </p>
                            <p class="text-success">
                                Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
                            </p>
                            <p class="text-info">
                                Maecenas sed diam eget risus varius blandit sit amet non magna.
                            </p>
                            <p class="text-warning">
                                Etiam porta sem malesuada magna mollis euismod.
                            </p>
                            <p class="text-danger">
                                Donec ullamcorper nulla non metus auctor fringilla.
                            </p>
                            <p class="text-dark">
                                Nullam id dolor id nibh ultricies vehicula ut id elit.
                            </p>
                            <p class="text-purple m-b-0">
                                Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
                            </p>

                        </div>

                    </div>
                    <!-- end row -->


                    <div class="row m-t-50">
                        <div class="col-sm-4 m-t-20">
                            <h4 class="m-t-0 header-title">无序</h4>
                            <p class="text-muted m-b-20 font-13">
                                顺序没有明确事项的项目列表.
                            </p>

                            <ul>
                                <li>
                                    Lorem ipsum dolor sit amet
                                </li>
                                <li>
                                    Consectetur adipiscing elit
                                </li>
                                <li>
                                    Integer molestie lorem at massa
                                </li>
                                <li>
                                    Facilisis in pretium nisl aliquet
                                </li>
                                <li>
                                    Nulla volutpat aliquam velit
                                    <ul>
                                        <li>
                                            Phasellus iaculis neque
                                        </li>
                                        <li>
                                            Purus sodales ultricies
                                        </li>
                                        <li>
                                            Vestibulum laoreet porttitor sem
                                        </li>
                                        <li>
                                            Ac tristique libero volutpat at
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    Faucibus porta lacus fringilla vel
                                </li>
                                <li>
                                    Aenean sit amet erat nunc
                                </li>
                                <li>
                                    Eget porttitor lorem
                                </li>
                            </ul>

                        </div>

                        <div class="col-sm-4 m-t-20">
                            <h4 class="m-t-0 header-title">命令</h4>
                            <p class="text-muted m-b-20 font-13">
                                顺序明确事项的列表.
                            </p>

                            <ol>
                                <li>
                                    Lorem ipsum dolor sit amet
                                </li>
                                <li>
                                    Consectetur adipiscing elit
                                </li>
                                <li>
                                    Integer molestie lorem at massa
                                </li>
                                <li>
                                    Facilisis in pretium nisl aliquet
                                </li>
                                <li>
                                    Nulla volutpat aliquam velit
                                    <ol>
                                        <li>
                                            Phasellus iaculis neque
                                        </li>
                                        <li>
                                            Purus sodales ultricies
                                        </li>
                                        <li>
                                            Vestibulum laoreet porttitor sem
                                        </li>
                                        <li>
                                            Ac tristique libero volutpat at
                                        </li>
                                    </ol>
                                </li>
                                <li>
                                    Faucibus porta lacus fringilla vel
                                </li>
                                <li>
                                    Aenean sit amet erat nunc
                                </li>
                                <li>
                                    Eget porttitor lorem
                                </li>
                            </ol>
                        </div>

                        <div class="col-sm-4 m-t-20">
                            <h4 class="m-t-0 header-title">样式</h4>
                            <p class="text-muted m-b-20 font-13">
                                <strong>This only applies to immediate children
                                    list items</strong>, 这意味着您还需要为任何嵌套列表添加类.
                            </p>

                            <ul class="list-unstyled">
                                <li>
                                    Lorem ipsum dolor sit amet
                                </li>
                                <li>
                                    Integer molestie lorem at massa
                                    <ul>
                                        <li>
                                            Phasellus iaculis neque
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    Faucibus porta lacus fringilla vel
                                </li>
                                <li>
                                    Eget porttitor lorem
                                </li>
                            </ul>

                            <h5>Inline</h5>
                            <p class="text-muted m-b-15 font-13">
                                将所有列表项放在同一行上 <code>
                                display: inline-block;</code>
                                还有一些内边距.
                            </p>

                            <ul class="list-inline m-b-0">
                                <li class="list-inline-item">
                                    Lorem ipsum
                                </li>
                                <li class="list-inline-item">
                                    Phasellus iaculis
                                </li>
                                <li class="list-inline-item">
                                    Nulla volutpat
                                </li>
                            </ul>

                        </div>
                    </div>
                    <!-- end row -->


                    <div class="row m-t-50">
                        <div class="col-sm-6 m-t-20">
                            <h4 class="m-t-0 header-title">引用</h4>
                            <p class="text-muted m-b-30 font-13">
                                你的文本能在这里.
                            </p>

                            <blockquote class="blockquote">
                                <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing
                                    elit. Integer posuere erat a ante.</p>
                                <footer class="blockquote-footer">Someone famous in <cite
                                        title="Source Title">Source Title</cite></footer>
                            </blockquote>

                            <p class="text-muted m-b-15 m-t-20 font-13">
                                Add <code>
                                .blockquote-reverse</code>
                                for a blockquote with right-aligned content.
                            </p>

                            <blockquote class="blockquote blockquote-reverse">
                                <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing
                                    elit. Integer posuere erat a ante.</p>
                                <footer class="blockquote-footer">Someone famous in <cite
                                        title="Source Title">Source Title</cite></footer>
                            </blockquote>
                        </div>

                    </div>
                    <!-- end row -->

                </div>
            </div>

        </div>
        <!-- end row -->
        </div>
        <!-- END wrapper -->


        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/tether.min.js"></script><!-- Tether for Bootstrap -->
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/plugins/switchery/switchery.min.js"></script>

        <!-- App js -->
        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>
        <script type="text/javascript">
            $(document).ready(
                 function() { 
                  $("#do-nicescrol").niceScroll({oneaxismousemode: false,cursorcolor: "#999",horizrailenabled: false});
                 }
                );
        </script>

    </body>
</html>